<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar title="登录"></van-nav-bar>
    <!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 -->
    <!--
    required: 是否显示表单必填星号
    label: 	输入框左侧文本
    -->
    <van-cell-group>
      <!-- 手机号 -->
      <van-field
        v-model="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"/>
      <!-- 验证码 -->
      <van-field
        v-model="code"
        required
        label="验证码"
        placeholder="请输入验证码（224500）"/>
    </van-cell-group>
    <div class="btn-wrap">
      <!-- type="primary": 主要按钮 -->
      <van-button type="primary" @click="login">登录</van-button>
    </div>
  </div>
</template>

<script>
  import { reqLogin, reqGetUserProfile } from '@/api/user.js'
  import { mapMutations } from 'vuex'
  import router from '@/router'

  export default {
    name: 'Login',
    data () {
      return {
        mobile: '13912345678',
        code: '246810',
        mobile_err_msg: '',
        code_err_mgs: ''
      }
    },
    methods: {
      // 登录参数校验方法
      validate () {
        if (this.mobile === '') {
          this.mobile_err_msg = '你tm不填手机号想干嘛'
          alert(this.mobile_err_msg)
          return false
        }
        if (!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.mobile)) {
          this.mobile_err_msg = '咋了，手机号都记不住'
          alert(this.mobile_err_msg)
          return false
        }
        this.mobile_err_msg = ''
        if (this.code === '') {
          this.code_err_mgs = '验证码也不填，你tm又想干嘛'
          alert(this.code_err_mgs)
          return false
        }

        return true
      },
      /**
       * 登录接口
       * @returns {Promise<void>}
       */
      async login () {
        // 参数校验
        if (!this.validate()) {
          return
        }

        // 给页面增加一个loading效果
        this.$toast.loading({
          duration: 2000, // 等待2000ms
          forbidClick: true, // 禁止背景点击
          overlay: true, // 显示背景遮罩层
          message: '接口在跑，等一下'
        })
        // 调用登录接口
        const res = await reqLogin(this.mobile, this.code)
        // vuex提交 mutation，存储用户 token 信息
        this.$store.commit('user/setTokenInfo', res.data.data)
        console.log(res.data.data)
        // 一个页面上只有一个toast, 它会把上面的Loading状态覆盖掉
        this.$toast.success('登录成功')
        // 登录成功，跳转到首页
        // this.$router.push("/")
        // 登录之前，判断路由信息对象中是否有backto（和登录拦截那边自定义的传参保持一致即可）字段，如果有，说明是从路由拦截过来的，
        // 登录成功后，需要给用户原路返回
        if (this.$route.query.backto) {
          this.$router.back()
        } else {
          // 不是拦截的，跳转到首页
          this.$router.push('/')
        }
      },

      async getUserInfo () {
        const res = await reqGetUserProfile()
        console.log(res)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login {
    .btn-wrap {
      padding: 20px;

      .van-button {
        width: 100%;
        color: #fff;
        border-radius: 5px;
      }
    }
  }
</style>
